﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>原始JSON代码格式化及着色</title>
<meta name="description" content="原始JSON代码格式化及着色工具">
<meta name="keywords" content="Json, 打印机, 着色, 格式化, 颜色">
<script src="http://ydtool.duapp.com/url_en-decode/jquery.js"></script>
<script src="http://ydtool.duapp.com/url_en-decode/url_en-decode.js"></script>

<script>
	window.TAB = "  ";
	function IsArray(obj) {
		return obj && typeof obj === 'object' && typeof obj.length === 'number' && !(obj.propertyIsEnumerable('length'))
	}
	function Process() {
		var json = document.getElementById("RawJson").value;
		document.getElementById("Canvas").style.display = "block";
		var html = "";
		try {
			if (json == "") json = "\"\"";
			var obj = eval("[" + json + "]");
			html = ProcessObject(obj[0], 0, false, false, false);
			document.getElementById("Canvas").innerHTML = "<PRE class='CodeContainer'>" + html + "</PRE>"
		} catch(e) {
			alert("JSON语法错误,不能格式化,错误信息:\n" + e.message);
			document.getElementById("Canvas").innerHTML = ""
		}
	}
	function ProcessObject(obj, indent, addComma, isArray, isPropertyContent) {
		var html = "";
		var comma = (addComma) ? "<span class='Comma'>,</span> ": "";
		var type = typeof obj;
		if (IsArray(obj)) {
			if (obj.length == 0) {
				html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>" + comma, isPropertyContent)
			} else {
				html += GetRow(indent, "<span class='ArrayBrace'>[</span>", isPropertyContent);
				for (var i = 0; i < obj.length; i++) {
					html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false)
				}
				html += GetRow(indent, "<span class='ArrayBrace'>]</span>" + comma)
			}
		} else if (type == 'object' && obj == null) {
			html += FormatLiteral("null", "", comma, indent, isArray, "Null")
		} else if (type == 'object') {
			var numProps = 0;
			for (var prop in obj) numProps++;
			if (numProps == 0) {
				html += GetRow(indent, "<span class='ObjectBrace'>{ }</span>" + comma, isPropertyContent)
			} else {
				html += GetRow(indent, "<span class='ObjectBrace'>{</span>", isPropertyContent);
				var j = 0;
				for (var prop in obj) {
					html += GetRow(indent + 1, '<span class="PropertyName">"' + prop + '"</span>: ' + ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true))
				}
				html += GetRow(indent, "<span class='ObjectBrace'>}</span>" + comma)
			}
		} else if (type == 'number') {
			html += FormatLiteral(obj, "", comma, indent, isArray, "Number")
		} else if (type == 'boolean') {
			html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean")
		} else if (type == 'function') {
			obj = FormatFunction(indent, obj);
			html += FormatLiteral(obj, "", comma, indent, isArray, "Function")
		} else if (type == 'undefined') {
			html += FormatLiteral("undefined", "", comma, indent, isArray, "Null")
		} else {
			html += FormatLiteral(obj, "\"", comma, indent, isArray, "String")
		}
		return html
	}
	function FormatLiteral(literal, quote, comma, indent, isArray, style) {
		if (typeof literal == 'string') literal = literal.split("<").join("&lt;").split(">").join("&gt;");
		var str = "<span class='" + style + "'>" + quote + literal + quote + comma + "</span>";
		if (isArray) str = GetRow(indent, str);
		return str
	}
	function FormatFunction(indent, obj) {
		var tabs = "";
		for (var i = 0; i < indent; i++) tabs += window.TAB;
		var funcStrArray = obj.toString().split("\n");
		var str = "";
		for (var i = 0; i < funcStrArray.length; i++) {
			str += ((i == 0) ? "": tabs) + funcStrArray[i] + "\n"
		}
		return str
	}
	function GetRow(indent, data, isPropertyContent) {
		var tabs = "";
		for (var i = 0; i < indent && !isPropertyContent; i++) tabs += window.TAB;
		if (data != null && data.length > 0 && data.charAt(data.length - 1) != "\n") data = data + "\n";
		return tabs + data
	}
</script>
<style>
.Canvas
{
 font: 10pt Georgia;
 background-color:#ECECEC;
 color:#000000;
 border:solid 1px #CECECE;
}
.ObjectBrace
{
 color:#00AA00;
 font-weight:bold;
}
.ArrayBrace
{
 color:#0033FF;
 font-weight:bold;
}
.PropertyName
{
 color:#CC0000;
 font-weight:bold;
}
.String
{
 color:#007777;
}
.Number
{
 color:#AA00AA;
}
.Boolean
{
  color:#0000FF;
}
.Function
{
  color:#AA6633;
  text-decoration:italic;
}
.Null
{
  color:#0000FF;
}
.Comma
{
  color:#000000;
  font-weight:bold;
}
PRE.CodeContainer{
  margin-top:0px;
  margin-bottom:0px;
}
.jsonUrl {
width:500px;
}
</style>
<style type="text/css"></style></head>
<body>
<h3 style="margin-bottom:2px">原始JSON代码格式化及着色</h3>
<input type="text" class="jsonUrl" id="jsonUrl" value="http://www.sonzer.cn/dg_v2.0/index.php?g=api2&m=diy&a=phone_case&source=wgc_android&last_update=0"><input type="Button" value="格式化" onclick="ProcessUrlJson()">
<div>请在下方输入你的JSON:</div>

<textarea id="RawJson" cols="100" rows="8"></textarea><br>
<input type="Button" value="格式化" onclick="Process()" id="ProcessBtn">
<div id="Canvas" class="Canvas"></div>
<iframe  frameborder="0" width="100%" scrolling="no" style="position:absolute;top:0;right:0;background-color: transparent;width:500px; height: 410px;" allowtransparency="true" src="http://ydtool.duapp.com/url_en-decode/"> 
</iframe>
<iframe  frameborder="0" width="100%" style="background-color: transparent;height:600px;" allowtransparency="true" src="http://www.bejson.com/go.php?u=http://www.bejson.com/zhuanyi.html"> 
</iframe>
<script>
var ProcessUrlJson=function(){

var toUrl=$('#jsonUrl').val();
var re=/http:\/\/192/;
if(re.test(toUrl))
{
     var url="http://192.168.99.99/getJson.php?url="+encodeURIComponent($('#jsonUrl').val());
}else{
     var url="http://www.sonzer.cn/sonzerweb/getJson.php?url="+encodeURIComponent($('#jsonUrl').val());
 }

  $.ajax({type:'get',url:url,dataType:'jsonp',async:false,jsonp: "jsonpCallback",jsonpCallback:"jsonpCallback",success:function(data){
    $("#RawJson").html(JSON.stringify(data));
    $("#ProcessBtn").click();
  },error:function(data){alert('错误');}});
}
</script>
</body>
</html>